<template>
  <div>
    <L_BackHeader :title="article.title" @handleBack="handleBack" />
    <div style="padding: 1rem">
      <el-text>{{ article.content }}</el-text>
    </div>
  </div>
</template>
  
<script  setup>
import { ElText } from "element-plus";
import { onMounted, ref } from "vue";
import L_BackHeader from "../../components/L-BackHeader.vue";
import { getArticleContentById } from "../../http/article";
// 1. 引入useRouter 或 useRoute
import { useRoute, useRouter } from "vue-router";

// 2. 调用useRouter函数
const $r = useRoute();
const router = useRouter();
const article = ref({});
const handleBack = () => {
  // console.log('返回');
  router.back();
};

onMounted(() => {
  const id = $r.query.id;

  getArticleContentById(id)
    .then((res) => {
      console.log(res);
      if (res.code == 1) {
        article.value = res.data.article;
      }
    })
    .catch((err) => {
      console.log(err);
    });
});
</script>